<template>
<div style="width: 100%;text-align: center;">
<div><span style="text-align: left;">服务单详情</span> <el-button type="warning" @click="$router.push({path:'/tuihuo'})">返回</el-button></div>
<div>
<div style="text-align: center;">
<p style="text-align: left;">退货商品</p>
<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="商品图片"
        width="180">
      <template slot-scope="scope">
         <img :src="scope.row.image" width="160px" height="80px">
       </template>
    </el-table-column>
    <el-table-column
      label="商品名称"
      width="180" prop="name">
    </el-table-column>
    <el-table-column
      label="价格"
      width="200" prop="price">
    </el-table-column>
    <el-table-column
      label="数量"
      width="200" prop="num">
    </el-table-column>
    <el-table-column
      label="小计"
      width="200" prop="money">
    </el-table-column>
  </el-table>
</div>
<p style="text-align: left;">服务单信息</p>
<el-form  v-model="Form" label-width="80px" >
  <el-form-item label="服务单号:">
    <el-input v-model="Form.id" disabled></el-input>
  </el-form-item>
  <el-form-item label="申请状态:">
    <el-input v-if="Form.status==0" value="申请" disabled></el-input>
    <el-input v-if="Form.status==1" value="同意" disabled></el-input>
    <el-input v-if="Form.status==2" value="驳回" disabled></el-input>
    <el-input v-if="Form.status==3" value="已完成" disabled></el-input>
  </el-form-item>
  <el-form-item label="订单编号:">
    <el-input v-model="Form.orderId" disabled></el-input>
  </el-form-item>
  <el-form-item label="申请时间:">
 <el-input v-model="this.youWant" disabled></el-input>
  </el-form-item>
  <el-form-item label="用户账号:">
<el-input v-model="Form.userAccount" disabled></el-input>
  </el-form-item>
  <el-form-item label="联系人:">
<el-input v-model="Form.linkman" disabled> </el-input>
  </el-form-item>
  <el-form-item label="联系电话:">
<el-input v-model="Form.linkmanMobile" disabled></el-input>
  </el-form-item>
  <el-form-item label="退货原因:">
<el-input v-model="Form.returnCause" disabled></el-input>
  </el-form-item>
  <el-form-item label="问题描述:">
<el-input v-model="Form.description" disabled></el-input>
  </el-form-item>
  <el-form-item label="凭证图片:">
     <img :src="Form.evidence" disabled width="160px" height="80px">
  </el-form-item>
  <el-form-item label="退运费:">
    <el-radio-group v-model="Form.isReturnFreight">
      <el-radio label="1">不退运费</el-radio>
      <el-radio label="2">退运费</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="退款金额:">
<el-input v-model="Form.returnMoney" disabled></el-input>
  </el-form-item>
  <el-form-item label="处理备注:" >
<el-input v-model="Form.remark"></el-input>
  </el-form-item>
  <el-form-item>
<el-button
       size="mini"
      type="danger"
       @click="handleEdit(Form.id, Form.orderId,Form.isReturnFreight);" v-if="Form.status==0">确定退货</el-button>
<el-button
       size="mini"
      type="danger"
       @click="handle(Form.id)" v-if="Form.status==1">确定收货</el-button>
<el-button
       size="mini"
       @click="handleDelete(Form.id, Form.remark)" v-if="Form.status==0">拒绝退货</el-button>
  </el-form-item>
</el-form>
</div>
</div>
</template>

<script>
export default {
  data () {
    return {
      // 呈现数据
      tableData: [],
      searchMap: {},
      Form: {},
      orderId: 0,
      id: 0,
      youWant: 0
    }
  },
  methods: {
    async getList () {
      // 发送请求查询数据并返回
      const { data: res } = await this.$http.post('/orders/order/item/findList2', this.searchMap)
      const { data: res2 } = await this.$http.post('/orders/return/order/findList2', this.searchMap)
      var d = new Date(res2.data[0].applyTime)
      const youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
      this.youWant = youWant
      this.Form = res2.data[0]
      this.tableData = res.data
    },
    async handleEdit (id, orderId, isReturnFreight) {
      await this.$http.get(`/orders/return/order/agreeToReturn?id=${id}&&orderId=${orderId}&&isReturnFreight=${isReturnFreight}`)
      this.getList()
    },
    async handleDelete (id, remark) {
      await this.$http.get(`/orders/return/order/rejectReturn?id=${id}&&remark=${remark}`)
      this.getList()
    },
    async handle(id) {
     await this.$http.get(`/orders/return/order/confirmReceipt?id=${id}`)
      this.getList()
    }
  },
  // 钩子函数
  async created () {
    this.orderId = this.$route.query.orderId
    this.searchMap = { orderId: this.$route.query.orderId }
    this.getList()
  }
}
</script>
<style>
</style>
